<template>
	<view>
		<view class="expense-code-wrap">			
			<view class="code-title-bar">
				<view class="title">消费码</view>
			</view>
			<view class="code-group">
				<view  style="text-align: center;margin-top: 10rpx;" >码头订单号：{{zhOrderId}} <text style="color: #01b1e1;margin-left: 20rpx;" @click="copy">复制</text></view>
				<uni-swiper-dot :current="current" field="content">
					<swiper class="swiper-box" @change="change" indicator-dots indicator-color="#c5c5c5" indicator-active-color="#0ab6c5">
						<swiper-item v-for="(item ,index) in qrcodeinfos" :key="index">
							<view class="swiper-item">
								<view class="success-code">
									<image
										:style="orderInfo.status == 5 && orderInfo.suits[0].is_open_multiple_qrcode=='0'?'opacity: 0.2;':''" 
										:src="`${orderInfo.suits[0].web_url}/res/vendor/qrcode/zhmake.php?param=${item.ticketinfo}`"
										mode="aspectFill"></image>
										<view v-if="orderInfo.status == 5 && orderInfo.suits[0].is_open_multiple_qrcode=='0'" class="sign-icon2"></view>
								</view>
								<view v-if="orderInfo.status == 5 && orderInfo.suits[0].is_open_multiple_qrcode=='1'" class="name" style="color:red">已使用</view>
								<view class="text">{{item.name}}</view>
								<view class="name" style="color:red">去程航班：{{info.godate}} {{info.goPlan}}</view>
								<view class="name" style="color:red" v-if="info.zhdate">直航航班：{{info.zhdate}} {{info.zhPlan}}</view>
								<view class="name" style="color:red">回程航班：{{info.backdate}} {{info.backPlan}}</view>
								
								<view class="name" style="color:#9d9d9d">第<text style="color: red;">{{index+1}}</text>张/共<text style="color: red;">{{qrcodeinfos.length}}</text>张</view>
								<view class="name" style="color:#9d9d9d">【左右滑动页面查看更多】</view>
								<view class="name" style="color:#9d9d9d">截屏保存此二维码前往验票，无需再取票</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 订单详情消费码
	 * 
	 */
	export default {
		name: 'stExpenseCode2',
		props: {
			zhOrderId:{
				type:String,
				default () {
					return ""
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			orderInfo: {
				type: Array,
				default () {
					return {}
				}
			},	
			qrcodeinfos: {
				type: Array,
				default () {
					return {}
				}
			}			
		},
		watch: {
			
		},
		data() {
			return {
				stccsStatus: ['', '未支付', '已支付', '等待退款', '退款完成', '已取消', '已使用'],
				totalNum: 0, // 总人数
				current: 0,
			};
		},
		methods: {
			copy(){
				uni.setClipboardData({
					data: this.zhOrderId,
					success: function () {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
				
			},
			change(e) {
				this.current = e.detail.current;
			},
			formatDate(datastr) {
				let d = datastr.split("-");
				return d[0] + '年' + d[1] + '月' + d[2] + '日'
			}
		}
	}
</script>

<style lang="scss">
	.module-block {
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}

	.expense-code-wrap {
		@extend .alignItems;
		border-radius: 20rpx;
		background-color: #f1f1f1;
		border: 2px solid #fff;

		.code-title-bar {
			width: 80rpx;
			height: 982rpx;
			border-radius: 10rpx 0 0 10rpx;
			background: linear-gradient(171deg, #2196F3 0%, #37a8ff 100%);
			@extend .directionColumn;
			justify-content: center;

			&.over {
				background: #333;
			}

			.title {
				padding: 20rpx 26rpx 0;
				text-align: center;
				font-size: $uni-font-size-base;
				font-weight: bold;
				color: $uni-text-color-inverse;
				line-height: 1.36;
			}

			.tags {
				padding: 4rpx 0;
				width: 36rpx;
				line-height: 1.42;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-inverse;
				text-align: center;
				border-radius: 4rpx;
				border: 1px solid #fff;
				margin: 28rpx auto 0;
			}
		}

		.code-group {
			flex: 1;
			height: 982rpx;
			padding: 0 20rpx 40rpx;
			font-size: $uni-font-size-base;
			border-bottom: 1px solid $uni-border-color;
			@extend .directionColumn;
			justify-content: center;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
			
			.swiper-box{
				margin-top:10rpx;
				height: 982rpx;
			}
		}

		.success-code {
			position: relative;
			width: 564rpx;
			height: 564rpx;
			margin: 0 auto;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.sign-icon {
			position: absolute;
			top: 20rpx;
			right: -47rpx;
			width: 141rpx;
			height: 124rpx;
			background: url("https://static.member.stourweb.cn/uniapp/static/images/expense-icon.png") no-repeat;
			background-size: contain;
		}

		.sign-icon2 {
			position: absolute;
			top: 20rpx;
			right: 0rpx;
			width: 560rpx;
			height: 560rpx;
			background: url("http://tt.cdaaaa.com/uploads/ysy.png") no-repeat;
			background-size: contain;
		}

		.text {
			margin-top: 16rpx;
			text-align: center;
			color: #3d3d3d;
			font-size: $uni-font-size-base;
			line-height: 1.43;
		}

		.number {
			font-family: "Arial";
			color: $uni-text-color-grey;
		}

		.num {
			margin-top: 16rpx;
			text-align: center;
			color: #3d3d3d;
			font-size: $uni-font-size-base;
			line-height: 1.43;
		}

		.name {
			
			text-align: center;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
			line-height: 1.43;
			text-align: center;
			margin: 0 auto;
			@extend .ellipse
		}
	}
</style>